<template>
	<view class="detail-pages" :style="{background:pageColor}" v-if="isLoad">
		<!-- #ifndef H5 -->
		<uni-nav-bar :isAbs="true" :shadow="false" :statusBar="true" :onlyLeft="true" :color="`#fff`" :zIndex="99"
			backgroundColor="none">
			<view slot="left" @tap="goUrl(0)">
				<view class="flex-center c-base radius" style="width:58rpx;height:58rpx;background:rgba(0,0,0,0.4)">
					<i class="iconfont icongengduo" style="font-size: 26rpx;transform: rotate(180deg);"></i>
				</view>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<banner @change="goBanner" :list="detail.img" :margin="0" :autoplay="true" :indicatorActiveColor="primaryColor"
			:height="653" :dotWidth="20" :dotBottom="38" :borderRadius="0" v-if="detail.img.length > 0">
		</banner>
		<view class="partner-type abs c-base" :style="{background: primaryColor}">{{detail.type_name}}</view>
		<view class="fill-base detail-info">
			<view class="text-bold f-sm-title">{{detail.title}}</view>
			<view class="flex-y-center pt-sm pb-md">
				<view class="flex-y-baseline pr-sm" style="color: #FF3C6E;" v-if="detail.money_type == 3">
					<text>¥</text>
					<text class="f-md-title">{{detail.join_price}}</text>
					<text class="f-desc">/人</text>
				</view>
				<view v-else class=" flex-center f-paragraph text-bold" style="color: #FF3C6E;">免费</view>
			</view>
			<view class="detail-time radius-16 pl-md pr-md flex-y-center f-desc">
				<text class="f-desc">还有</text>
				<min-countdown :type="3" :color="primaryColor" :bgColor="bgColor" countdownClass="partner-detail"
					:targetTime="detail.join_end_time*1000" @callback="countEnd"></min-countdown>
				<text class="f-desc" style="padding-left: 12rpx;">报名结束</text>
			</view>
			<view class="pt-lg flex-y-center b-1px-b" style="padding-bottom: 25rpx;">
				<view class="left-icon flex-y-center">
					<i class="iconfont iconshijianguanli text-bold"></i>
				</view>
				<view class="flex-y-center f-desc text-bold">
					活动时间：{{$util.formatTime(detail.start_time*1000,'YY.M.D h:m')}} -
					{{$util.formatTime(detail.end_time*1000,'YY.M.D h:m')}}
				</view>
			</view>
			<view class="pt-lg flex-y-center rel">
				<view class="left-icon flex-y-center">
					<i class="iconfont icondizhiguanli3 text-bold" style="font-size: 18px;"></i>
				</view>
				<view class="flex f-desc text-bold">
					<!-- <text class="pr-sm">12km</text> -->
					<view class="max-500 ellipsis">{{detail.address}}</view>
				</view>
				<image @tap.stop="toMap" class="addr-icon abs"
					src="https://api.huixuananmm.com/admin/anmo/partner/partner-addr.png" mode="aspectFill"></image>
			</view>
			<view class="pt-sm f-desc" style="color: #A3A3A3;padding-left: 151rpx;" v-if="detail.address_info">
				({{detail.address_info}})</view>
		</view>
		<view class="detail-user fill-base pl-lg pr-lg mt-md pb-lg">
			<view class="h-90 flex-between">
				<view class="f-title text-bold">加入人员</view>
				<view class="f-caption flex-y-baseline">
					<text class="f-paragraph text-bold "
						:style="{color: primaryColor}">{{detail.join_num}}</text>/{{detail.sign_num}}人加入
				</view>
			</view>
			<view class="pt-sm detail-user-list"
				:class="[{'h-340': isMore&&!detail.is_me}, {'hidden': detail.join_list.length > 1}]">
				<view class="flex-between" :class="[{'pb-lg': index < detail.join_list.length - 1}]"
					@tap="toShowDialog(item, 'view')" v-for="(item,index) in detail.join_list" :key="index">
					<view class="flex-center">
						<view class="rel flex-center">
							<image class="user-cover" :src="item.avatarUrl" mode="aspectFill"
								:style="{borderColor:item.sex?(item.sex==1?'#66B4FF':'#FF9CC0'):''}"></image>
							<view v-if="item.is_create == 1" class="user-label abs c-base flex-center f-little"
								:style="{background:primaryColor}">局主</view>
						</view>
						<view class="f-desc pr-sm" style="padding-left: 14rpx;">{{item.nickName}}</view>
						<view class="sex-box flex-center"
							:class="[{'sex-female':item.sex == 2},{'sex-male':item.sex == 1}]">
							<i class="iconfont"
								:class="[{'iconnv-hongse':item.sex == 2},{'iconnan-lanse':item.sex == 1}]"
								style="font-size: 9px;"></i>
						</view>
					</view>
					<view class="flex-center contact-btn" :style="{background: bgColor}" v-if="item.is_create == 1"
						@tap.stop="toConfirmTel(item.phone||detail.phone)">
						<i class="iconfont icondianhua11" :style="{color: primaryColor}"></i>
						<text class="f-desc text-bold" :style="{color: primaryColor}"
							style="padding-left: 2px;line-height: 1;">联系TA</text>
					</view>
					<block v-else>
						<view class="f-desc" style="color: #319AFF;" v-if="item.is_sign">已签到</view>
						<view class="f-desc" style="color: #5A677E;" v-else-if="item.status == 4">已加入</view>
						<block v-else-if="item.status == 2">
							<view v-if="options.type == `record` && detail.is_me" class="flex-center">
								<view class="examine-btn flex-center f-desc c-base" :style="{background:primaryColor}">
									审核</view>
							</view>
							<view class="f-desc" style="color: #FF3C6E;" v-else>待审核</view>
						</block>
					</block>
				</view>
			</view>
			<view class="flex-center" style="color: #5A5A5A;" v-if="detail.join_list.length > 3 && !detail.is_me"
				@tap="handerMore">
				{{isMore?'展开':'收起'}} <i class="iconfont iconxiangxiazhankai text-bold"
					:class="[{'rotate-180':!isMore}]"></i>
			</view>
		</view>
		<view class="mt-md pl-lg pr-lg fill-base pb-lg">
			<view class="h-90 text-bold f-title flex-y-center">参与人条件</view>
			<view class="pt-sm f-desc">
				<text class="c-paragraph">参与人年龄：</text>
				<text class="text-bold">{{detail.limit_age == 0 ? `不限` : `${detail.min_age} - ${detail.max_age}`}}
				</text>
			</view>
			<view class="pt-lg f-desc">
				<text class="c-paragraph">参与人性别：</text>
				<text class="text-bold">{{ limitSexType[detail.limit_sex] }}</text>
			</view>
			<view class="pt-lg f-desc">
				<text class="c-paragraph">活动签到开始时间：</text>
				<text class="text-bold">{{ $util.formatTime(detail.sign_start_time*1000,'YY.M.D h:m') }}</text>
			</view>
		</view>
		<view class="mt-md pl-lg pr-lg fill-base" v-if="detail.content.length > 0">
			<view class="h-90 text-bold f-title flex-y-center">活动详情</view>
			<view class="pb-lg">
				<block class="" v-for="(item,index) in detail.content" :key="index">
					<view style="white-space: pre-wrap" v-if="item.type == 1">{{item.value}}</view>
					<image v-else :src="item.value" style="width: 100%;" mode="widthFix"></image>
				</block>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<block v-if="options.type == `record`">
			<fixed position="bottom" :zIndex="997">
				<view class="fill-base">
					<view class="footer-box flex-between pl-lg pr-lg">
						<view class="flex-center flex-1" v-if="detail.status == 4">
							<!-- #ifdef MP-WEIXIN -->
							<button class="flex-center footer-box-share flex-column" open-type="share">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="flex-center footer-box-share flex-column" @tap="toAppShare">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view class="flex-center footer-box-share flex-column" @tap="$refs.share_box.open()">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</view>
							<!-- #endif -->
						</view>
						<view class="f-caption ml-md" style="color: #169bd5;" v-else-if="detail.status_text==2"
							@tap.stop="toSee">查看原因</view>
						<view class="" v-else></view>
						<view class="footer-box-btn c-base f-ms-title flex-center"
							:style="{background: statusType[detail.status_text].color}">
							{{statusType[detail.status_text].name}}
						</view>
					</view>
					<view class="space-safe"></view>
				</view>
			</fixed>
		</block>
		<block v-else>
			<fixed position="bottom" :zIndex="997">
				<view class="fill-base">
					<view class="footer-box flex-between pl-lg pr-lg">
						<view class="flex-center flex-1">
							<!-- #ifdef MP-WEIXIN -->
							<button class="flex-center footer-box-share flex-column" open-type="share">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="flex-center footer-box-share flex-column" @tap="toAppShare">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</view>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<view class="flex-center footer-box-share flex-column" @tap="$refs.share_box.open()">
								<i class="iconfont iconfenxiang1" style="color: #333333;font-size: 18px;"></i>
								<text class="f-caption " style="color: #A4A4A4;padding-top: 2px;">分享</text>
							</view>
							<!-- #endif -->
						</view>
						<view class="footer-box-btn c-base f-ms-title flex-center" :style="{background: primaryColor}"
							@tap.stop="$util.goUrl({url: `/partner/pages/sign-up?id=${detail.id}`})">立即报名</view>
					</view>
					<view class="space-safe"></view>
				</view>
			</fixed>
		</block>

		<uni-popup ref="show_tips" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">说明</view>
				<view class="f-desc c-title mt-lg pre-wrap">
					{{detail.partner_check_text || '暂无驳回原因'}}
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_tips.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="show_userinfo" type="center" :maskClick="true">
			<view class="common-popup-content fill-base pd-lg radius-34 rel">
				<i class="iconfont iconguanbi abs" style="right: 30rpx; top: 30rpx;font-size: 20px;"
					@tap="$refs.show_userinfo.close()"></i>
				<view class="title flex-center">报名资料</view>
				<view class="f-desc c-title mt-lg" style="width: 100%;max-height: 50vh;overflow-y: scroll;">
					<view class="flex">
						<view class="text-bold" style="width: 150rpx;">姓名</view>
						<view>{{itemUserInfo.nickName}}</view>
					</view>
					<view class="flex mt-md" v-if="detail.is_me">
						<view class="text-bold" style="width: 150rpx;">手机号</view>
						<view>{{itemUserInfo.phone}}</view>
					</view>
					<block v-if="itemUserInfo.field">
						<block v-for="(item,index) in itemUserInfo.field" :key="index">
							<view v-if="item.type == 3" class="flex mt-md">
								<view class="text-bold" style="width: 150rpx;">{{item.name}}</view>
								<upload @upload="" :imagelist="[{path: item.value}]" imgtype="value" :isEdit="false"
									text="上传图片" :imgsize="1">
								</upload>
							</view>
							<view class="mt-md flex" v-else>
								<view class="text-bold" style="width: 150rpx;">{{item.name}}</view>
								<view class="flex-1">{{item.value}}</view>
							</view>
						</block>
					</block>
					<view class="flex mt-md" v-if="detail.is_me && itemUserInfo.text">
						<view class="text-bold" style="width: 150rpx;">备注</view>
						<view class="pre-wrap flex-1">{{itemUserInfo.text}}</view>
					</view>
					<view class="button" v-if="itemUserInfo.status == 2 && detail.is_me">
						<view @tap.stop="handerCheck(4)" class="item-child c-base"
							:style="{background: primaryColor,color:'#fff'}">通 过</view>
						<view @tap.stop="handerCheck(3)" class="item-child"
							:style="{background: '#c7c7c7', color: '#000'}">驳 回</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="share_box" type="center" :custom="true" :bgOpacity="0.6">
			<view class="share-friend">
				<view class="flex" style="justify-content: flex-end;">
					<image class="share-tips1" src="https://api.huixuananmm.com/admin/card/share-friend2.png"
						mode="aspectFill"></image>
				</view>
				<view class="flex" style="justify-content: flex-end;">
					<image class="share-tips2" src="https://api.huixuananmm.com/admin/card/share-friend1.png"
						mode="aspectFill"></image>
				</view>
				<view class="flex-center">
					<view class="share-box-btn f-title c-base flex-center" @tap="$refs.share_box.close()">知道了</view>
				</view>
			</view>
		</uni-popup>

		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<longbingbing-app-check-auth type="phone" ref="app_check_item"
			@confirm="$util.goUrl({ url: call_phone, openType: 'call' })"></longbingbing-app-check-auth>
		<!-- #endif -->
	</view>
</template>

<script>
	import siteInfo from '@/siteinfo.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import longbingbingPartnerListItem from "@/components/longbingbing-partner-list-item.vue"
	export default {
		components: {
			longbingbingPartnerListItem
		},
		data() {
			return {
				options: {},
				call_phone: '',
				isLoad: false,
				loading: true,
				tabList: [{
						title: '全部',
						id: 0
					},
					{
						title: '我发起的',
						id: 1
					},
					{
						title: '我报名的',
						id: 2
					}
				],
				activeIndex: 0,
				param: {
					page: 1
				},
				tips: '',
				bgColor: '',
				detail: {},
				limitSexType: {
					0: '不限',
					1: '只限男生',
					2: '只限女生',
					3: '男女对半'
				},
				statusType: { // 1待平台审核 2驳回 3已通过 4有参与者待审核 5待局主审核 6已加入
					1: {
						name: '待平台审核',
						color: '#FF1500',
						bgColor: '#FFE1E1'
					},
					2: {
						name: '已驳回',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					3: {
						name: '已通过',
						color: '#1BCA62',
						bgColor: 'rgba(27, 202, 98, 0.1)'
					},
					4: {
						name: '有参与者待审核',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					5: {
						name: '待局主审核',
						color: '#FF6E00',
						bgColor: '#FFEEE1'
					},
					6: {
						name: '已通过报名审核',
						color: '#1BCA62',
						bgColor: 'rgba(27, 202, 98, 0.1)'
					},
				},
				isMore: true,
				itemUserInfo: '',
				examine: {
					id: '',
					status: ''
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.options = options
			this.$util.showLoading()
			await this.$util.toAsyAccLogin()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {

				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.bgColor = this.$util.rgbColor(this.primaryColor, 0.1)
				await this.getDetails()
				// #ifdef H5
				this.$jweixin.initJssdk(() => {
					this.toAppShare()
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.showShareMenu({
					menus: ['shareAppMessage', 'shareTimeline']
				})
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			handerMore() {
				this.isMore = !this.isMore
			},
			async getDetails() {
				let {
					id,
					type = ''
				} = this.options
				let moduleName = type ? 'myPartnerInfo' : 'getPartnerInfo'
				let param = type ? {
					join_id: id
				} : {
					id
				}

				let data = await this.$api.partner[moduleName](param)
				data.join_list.forEach(item => {
					if (item.field) {
						item.field.forEach(citem => {
							if (citem.type == 2 && citem.name == '性别') {
								item.sex = citem.value.indexOf('男') !== -1 ? 1 : 2
							}
						})
					}
				})
				this.detail = data
				this.isLoad = true
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.activeIndex = index
			},
			goBanner(item) {
				let current = item
				let urls = this.detail.img
				this.$util.previewImage({
					current,
					urls
				})
			},
			toSee() {
				this.$refs.show_tips.open()
			},
			toConfirmTel(url) {
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.CALL_PHONE') ===
					'undetermined') {
					this.call_phone = url
					this.$refs.app_check_item.open()
				} else {
					this.$util.goUrl({
						url,
						openType: 'call'
					})
				}
				// #endif
				// #ifndef APP-PLUS
				this.$util.goUrl({
					url,
					openType: 'call'
				})
				// #endif
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let {
					cover: imageUrl,
					id = 0
				} = this.detail
				let title = '我发现了一个好玩的活动'
				let {
					type = ''
				} = this.options
				let summary = '一起来参与吧~'

				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/${this.portName}/#/partner/pages/detail?id=${id}&pid=${pid}`

				// #ifdef H5
				this.$jweixin.showOptionMenu()
				this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
				this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				// #endif
				// #ifdef APP-PLUS
				let item = {
					href,
					title,
					summary,
					imageUrl,
				}
				if (this.configInfo.isIos) {
					this.$util.showLoading()
					this.toTransImg(item)
				} else {
					this.sharePage(item)
				}
				// #endif
			},
			toTransImg(item) {
				let that = this
				let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
				uni.downloadFile({
					url: item.imageUrl,
					success: (e) => {
						// 将png转换成jpg格式 只有jpg格式支持压缩api
						plus.zip.compressImage({
								src: e.tempFilePath,
								dst: `_doc/${cur_unix}.jpg`,
								format: "jpg"
							},
							response => {
								// 压缩图片
								plus.zip.compressImage({
									src: response.target,
									dst: `_doc/${cur_unix}-img.jpg`,
									quality: 50,
								}, res => {
									item.imageUrl = res.target || `/static/img/logo.png`
									that.sharePage(item)
								}, error => {
									item.imageUrl = `/static/img/logo.png`
									that.sharePage(item)
								})
							})
					}
				})
			},
			sharePage(item) {
				this.$util.hideAll()
				let {
					href,
					title,
					summary,
					imageUrl,
				} = item
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			goUrl() {
				this.$util.goUrl({
					url: 1,
					openType: 'navigateBack'
				})
			},
			countEnd(e) {},
			// 查看定位
			async toMap() {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif
				let {
					address,
					lat,
					lng
				} = this.detail
				// #ifdef APP-PLUS
				this.$util.goMap({
					lat,
					lng,
					address,
					address_info: ''
				})
				return
				// #endif
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				await uni.getLocation({
					type: 'gcj02',
				})
				await uni.openLocation({
					latitude: lat * 1,
					longitude: lng * 1,
					name: address,
					scale: 28
				})
			},
			async handerCheck(status) {
				let {
					examine
				} = this
				examine.status = status
				await this.$api.partner.joinCheck(examine)
				this.$util.showToast({
					title: `操作成功`
				})
				this.$refs.show_userinfo.close()
				this.getDetails()
			},
			toShowDialog(data, type) {
				if (data.is_create == 1 || (!this.detail.is_me && ((this.detail.show_user_info == 1 && data.status == 2) ||
						!this.detail.show_user_info))) return
				this.itemUserInfo = data
				this.examine.id = data.id
				this.$refs.show_userinfo.open()
			}
		},
		onShareAppMessage(e) {
			console.log(e)
			let index = 0
			if (e && e.target && e.target.dataset) {
				index = e.target.dataset.index || 0
			}
			let {
				id: pid = 0
			} = this.userInfo
			let {
				id,
				title,
				cover: imageUrl
			} = this.detail
			let path = `/partner/pages/detail?pid=${pid}&id=${id}`
			this.$util.log(path)
			return {
				title: '我发现了一个好玩的活动',
				imageUrl,
				path,
			}
		},
	}
</script>


<style lang="scss">
	.detail-pages {
		.partner-type {
			padding: 0 8rpx;
			border-radius: 4rpx;
			right: 30rpx;
			// #ifdef H5
			top: 30rpx;
			// #endif
			// #ifndef H5
			top: 186rpx;
			// #endif
		}

		.detail-info {
			padding: 44rpx 30rpx 30rpx 30rpx;

			.detail-money-type {
				width: 68rpx;
				height: 36rpx;
				border-radius: 36rpx;
				border: 1px solid transparent;
			}

			.detail-time {
				height: 80rpx;
				background: #F8F5FF;
			}

			.left-icon {
				width: 65rpx;
			}

			.addr-icon {
				width: 69rpx;
				height: 69rpx;
				border-radius: 69rpx;
				right: 15rpx;
				top: 14rpx;
			}
		}

		.detail-user {
			.detail-user-list {
				height: auto;
			}

			.hidden {
				overflow: hidden;
			}

			view.h-340 {
				max-height: 340rpx;
			}

			.sex-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 6rpx;
			}

			.sex-female {
				color: #F72370;
				background: rgba(247, 35, 112, 0.2);
			}

			.sex-male {
				color: #319AFF;
				background: rgba(49, 154, 255, 0.2);
			}

			.user-cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				border: 2px solid transparent;
			}

			.user-label {
				width: 60rpx;
				height: 24rpx;
				border-radius: 24rpx;
				border: 1px solid #fff;
				z-index: 1;
				bottom: -6rpx;
			}

			.contact-btn {
				width: 152rpx;
				height: 48rpx;
				border-radius: 48rpx;
			}
		}

		.h-90 {
			height: 90rpx;
		}

		.footer-box {
			height: 120rpx;

			.footer-box-btn {
				width: 473rpx;
				height: 90rpx;
				border-radius: 90rpx;
			}
		}

		.examine-btn {
			width: 120rpx;
			height: 60rpx;
			border-radius: 60rpx;
			background: #c7c7c7;
		}

		.share-friend {
			width: 100vw;
			height: 100vh;

			.share-tips1 {
				width: 123rpx;
				height: 138rpx;
				margin-right: 30rpx;
				margin-top: 10rpx;
			}

			.share-tips2 {
				width: 507rpx;
				height: 157rpx;
				margin-top: 37rpx;
				margin-right: 40rpx;
			}

			.share-box-btn {
				width: 264rpx;
				height: 105rpx;
				border-radius: 105rpx;
				border: 1px solid #fff;
				margin-top: 130rpx;
			}
		}
	}
</style>